<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input
              size="medium"
              v-model="subquery"
              placeholder="查询"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="onSubmit"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="newest(0)"
              icon="el-icon-circle-plus-outline"
              >新增</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="list" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="date" label="开票日期" width="">
            </el-table-column>
            <el-table-column prop="name" label="申请人" width="">
            </el-table-column>
            <el-table-column prop="date1" label="开票资料" width="">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column prop="address1" label="电话"> </el-table-column>
            <el-table-column prop="address2" label="邮箱"> </el-table-column>
            <el-table-column prop="address2" label="名称"> </el-table-column>
            <el-table-column prop="address2" label="开票类型">
            </el-table-column>
            <el-table-column prop="address2" label="税点"> </el-table-column>
            <el-table-column prop="address2" label="关联合同">
            </el-table-column>
            <el-table-column prop="address2" label="开票金额">
            </el-table-column>
            <el-table-column label="备注" prop="address3"> </el-table-column>
            <el-table-column label="实例状态" prop="address3">
            </el-table-column>
            <el-table-column label="操作" width="230" align="center">
              <template #default="scope">
                <el-button
                  type="success"
                  size="mini"
                  @click="makes(scope.row, 1)"
                  >开票</el-button
                >
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="single"
      v-model="plassets"
      width="850px"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :inline="true" :model="form" label-width="80px">
        <el-form-item label="申请日期">
          <el-date-picker
            style="width: 300px"
            v-model="form.dates"
            type="date"
            placeholder="选择日期"
            format="YYYY 年 MM 月 DD 日"
          >
            >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="申请人">
          <el-select
            style="width: 300px"
            v-model="form.applicant"
            placeholder="请选择"
          >
            <el-option
              v-for="item in fname"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传开票资料">
          <el-upload
            style="width: 300px"
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                只能上传 jpg/png 文件，且不超过 500kb
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="收票人地址">
          <el-input
            style="width: 300px"
            v-model="form.address"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
            style="width: 300px"
            v-model="form.extraemail"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input
            style="width: 300px"
            v-model="form.phone"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input
            style="width: 300px"
            v-model="form.fooFile"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="开票类型">
          <el-select
            style="width: 300px"
            v-model="form.typeparam"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in post_type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="税点" style="width: 380px">
          <el-radio v-model="form.point" label="1">6%</el-radio>
          <el-radio v-model="form.point" label="2">13%</el-radio>
        </el-form-item>
        <el-form-item label="关联合同">
          <el-select
            style="width: 300px"
            v-model="form.contract"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in reassociated"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开票金额">
          <el-input
            type="number"
            style="width: 300px"
            v-model="form.sofon"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            style="width: 300px"
            v-model="form.addnote"
            type="textarea"
            :rows="2"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" style="text-align: center">
          <el-button @click="plassets = false">取 消</el-button>
          <el-button type="primary" v-if="under == 0" @click="determine()"
            >确 定</el-button
          >
          <el-button @click="hardware()" v-if="under == 1" type="primary"
            >开 票</el-button
          >
          <el-button @click="refused()" v-if="under == 1" type="danger"
            >拒 绝</el-button
          >
        </div>
      </template>
    </el-dialog>
    <el-dialog
      title="开票管理"
      v-model="invoices"
      width="550px"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="outils" label-width="80px">
        <el-form-item label="发票代码">
          <el-input style="width: 300px" v-model="outils.setInvoice"></el-input>
        </el-form-item>
        <el-form-item label="发票号码">
          <el-input style="width: 300px" v-model="outils.thenumber"></el-input>
        </el-form-item>
        <el-form-item label="开票日期">
          <el-date-picker
            style="width: 300px"
            v-model="outils.dates"
            type="date"
            placeholder="选择日期"
            format="YYYY 年 MM 月 DD 日"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上传文件"> </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="invoices = false">取 消</el-button>
          <el-button type="primary" @click="determine()">开 票</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      subquery: "",
      fileList: [],
      form: {
        dates: "",
        applicant: "", //申请人
        address: "", //收票人地址
        extraemail: "",
        fooFile: "", //名称
        typeparam: "",
        phone: "",
        addnote: "",
        point: "",
        contract: "", //关联合同
        sofon: "",
      },
      outils: {
        setInvoice: "",
        thenumber: "", //发票号码
        dates: "",
      },
      fname: [], //
      post_type: [
        {
          value: "0",
          label: "增值税专用发票",
        },
        {
          value: "1",
          label: "增值税电子普通发票",
        },
      ],
      reassociated: [], //关联合同
      managerData: [],
      plassets: false,
      invoices: false,
      under: 0,
      single: "",
      tableData: [
        {
          list: "1",
          date: "2021/5/11",
          name: "001",
          date1: "xxxxx",
          address: "100",
          address1: "张三",
          address2: "123456",
          address3: "xxxxxx",
        },
      ],
    };
  },
  methods: {
    onSubmit() {},
    makes(row, index) {
      console.log(row);
      console.log(index);
      this.under = index;
      this.plassets = true;
    },
    hardware() {
      this.invoices = true;
    },
    newest(index) {
      this.under = index;
      this.single = "新增发票";
      this.plassets = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>

<style scoped>
.addccc {
  margin-bottom: 20px;
}
</style>